<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			#top {
				width: 100%;
			}
			
			.son {
				width:100%;
				height: 100%;
				border: 1px solid red;
			}
			
			span {
				width: 200px;
				height: 200px;
				border: 1px solid yellow;
			}			
			img {
				cursor: move;
			}
			.name{
				float: left;
				width: 185px;
				text-align: center;
			}
			#top:after{
				content: '';
				display: block;
				clear: both;
			}
		</style>
	</head>

	<body>
		<div id="top">
			<div class="name">
				<img src="img/campIcon_01.jpg" draggable="true" id="a" />
				<p>安踏</p>
				<p>199￥</p>
			</div>
			<div class="name">
				<img src="img/campIcon_02.jpg" draggable="true" id="b" />
				<p>飞科</p>
				<p>299￥</p>
			</div>
			<div class="name">
				<img src="img/campIcon_03.jpg" draggable="true" id="c" />
				<p>李宁</p>
				<p>399￥</p>
			</div>
			<div class="name">
				<img src="img/campIcon_04.jpg" draggable="true" id="d" />
				<p>牛逼</p>
				<p>499￥</p>
			</div>				
		</div>
		<div class="son">
			<table cellspacing="0" cellpadding="20" border="1">
				<thead>
					<th>商品名字</th>
					<th>商品数量</th>
					<th>商品价格</th>
				</thead>
				<tbody>

				</tbody>
			</table>
		</div>
		<span></span>
		<span>商品总价格:</span>
		<span id="sum"></span>
		<script type="text/javascript">
			var top = document.getElementById('top');
			var son = document.getElementsByClassName('son')[0];
			var name = document.getElementsByClassName('name')[0];
			var img = document.getElementsByTagName('img');
			var span = document.getElementsByTagName('span')[0];
			var tbody=document.getElementsByTagName('tbody')[0];
			var he=document.getElementById('sum');
			var sum;
			var starY;
			var endY;
			top.ondragstart = function(e) {//开始拖曳
				starY=e.screenY;
				console.log(starY)
				sum = e.target.id;
				span.innerHTML = '开始拖曳' + sum;
				//鼠标在拖动元素的位置
				
			}
			top.ondragenter = function(e) {//进入目的元素
				span.innerHTML = '进入目的元素';
				e.preventDefault();

			}
			top.ondragover = function(e) {//在目的元素移动
				span.innerHTML = '在目的元素移动';
				e.preventDefault();
			}
			top.ondragend=function(e){//结束拖曳
				span.innerHTML = '结束拖曳';
				e.preventDefault();				
			}
			top.ondrop = function(e) { //释放元素
				endY=e.screenY;
				console.log(endY)
				var newimg = document.getElementById(sum);
				var p1=newimg.nextElementSibling.innerHTML;
				var p2=newimg.nextElementSibling.nextElementSibling.innerHTML;
				if(endY-starY>=74){
					tbody.innerHTML+='<tr><td>'+p1+'</td><td>1</td><td>'+p2+'</td></tr>';
				}				
				var tr=tbody.children;
				var s=0;
				for(var i=0;i<tr.length;i++){
					s+=parseInt(tr[i].lastElementChild.innerHTML);
				}
				he.innerHTML=s+'￥';
				e.preventDefault();
			}
		</script>
	</body>

</html>